<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>找回密码 - ${site.name}</title>
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script src="${resSys}/front.js" type="text/javascript"></script>
  <script type="text/javascript" src="${resSys}/TimerButton.js"></script>

<link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />

<!--[if lt IE 9]>
<script src="/${res}/js/html5shiv.min.js"></script>
<script src="/${res}/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
    .sm_button{
        background-color: #f94d4d;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        line-height: 36px;
        height: 36px;
        -webkit-border-radius: 5px;
    }
</style>
<script type="text/javascript">
$(function() {
	$("#jvForm").validate();
	$("#getSmCode1").attr("disabled", true);
});

function validatePhone(obj) {
    $.ajax({
        url: "${base}/phone_exists.jspx",
        type: "POST",
        dataType:"json",
        data: {username : $(obj).val()},
        success: function (data) {
            $("#username").parent().find("label").remove();
            if(!data.flag){
                var str = $("<label for=\"username\" generated=\"true\" class=\"error\">该手机号码未注册</label>");
                $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
            }else{
                $("#getSmCode1").attr("disabled", false);
            }
        }
    });
}
</script>
  <script type="text/javascript">
      $(function (){
          /*TimerButton是一个对象，该对象中有两个方法，一个是SecondCountDown，该方法的作用是精确倒计时。普通的使用setInterval倒计时会存在一定的偏差，特别是当我们切换窗口时，而SecondCountDown解决了这个误差问题（具体用法见timedown.html）。
          另一个方法是verify，该方法的作用是实现按钮倒计时的功能，有了这个按钮倒计时就可以实现获取验证码倒计时的功能*/
          console.log(timerButton);

          var btn = $("#getSmCode1");
          timerButton.verify_("#getSmCode1", {
              time: 60,//倒计时时间
              event: "click",//事件触发方式
              //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
              condition: function () {
                  $("#username").parent().find("label").remove();
                  var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9{1}]))+\d{8})$/,
                      flag = phoneReg.test($("#username").val());
                  if(!flag){
                      //alert("电话号码填写不正确！");
                      //$("#username").parent().append('电话号码填写不正确');
                      var str = $("<label for=\"username\" generated=\"true\" class=\"error\">电话号码为空或者格式填写不正确</label>");
                      $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
                      return false;
                  }

                  return true;
              },
              unableClass: "unabled",//按钮不能使用时的class
              runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
              timeUpText: "重新获取",//时间到了时按钮显示的文字
              progress: function (time) {//计时正在进行中时的回调
                  btn.html(time + " s后重新获取");
                  console.log(this);//这里的this指向按钮
                  console.log(this.timedown);//这个timedown就是计时器
              },
              timeUp: function (time) {//计时结束时执行的回调
                  btn.html("重新获取");
                  console.log("时间到了！");
                  console.log(this);//这里的this指向按钮
              },
              abort: function () {//中断计时
                  btn.html("重新获取");
                  console.log("我被中断了！");
                  console.log(this);//这里的this指向按钮
              },
              eventFn: function () {//事件执行后的回调
                  console.log(this);
                  console.log("执行了");
                  $.ajax({
                      url: "${base}/smCode_validate.jspx",
                      type: "POST",
                      dataType:"json",
                      data: {phone : $("#username").val(), smType: "2"},
                      success: function (data) {
                          $("#validateCode").val(data.smCode);
                      }
                  });
                  console.log(this);//这里的this指向按钮
              }
          });
      });
  </script>

</head>

<body style="background-color:#f7f7f7;">
[#include "../include/top.html"/]
[#include "../include/header.html"/]
<div class="register-box" style="height:320px;">
  <div class="register-nav"><span>找回密码</span><div class="register-login">没有账号，<a class="tc" href="${base}/register.jspx">立即注册 ></a></div></div>
  <form id="jvForm" action="forgot_password.jspx" method="post">
  <div class="register-list">
    <ul>
      <li><span>手机号</span><input type="text" id="username" vld="{required:true,rangelength:[${site.usernameMinLen},12]}" onchange="validatePhone(this)" name="username" class="register-input" placeholder="请输入注册手机号" /></li>
      <li>
        <span>短信验证码</span><input type="text" id="smCode" maxlength="8" style="width: 150px;" name="smCode" vld="{required:true}" placeholder="请输入短信验证码" class="register-input" />
        <!--<a id="getSmCode1" maxlength="8" class="sm_button" >获取短信验证码</a>-->
        <button id="getSmCode1" maxlength="8" class="sm_button" >获取短信验证码</button>
        <input type="hidden" id="validateCode" name="validateCode"/>
      </li>
      <li class="register-btn">
      <input type="hidden" name="token"  value="${token!}" />
      <input type="submit" name="register" value="提 交" />
      </li>
    </ul>
  </div>
  </form>
</div>
[#include "../include/footer.html"/]
[#include "../include/right-fixed.html"/]
</body>
</html>
